<template>
    <div class="my-notice">
        <div class="buffer">
            <NoData v-if="res_notice.length === 0 && !loadingFailed">
                稍等片刻&nbsp;数据正在赶来...
            </NoData>
            <NoData v-if="loadingFailed">
                加载失败&nbsp;请稍后重试
            </NoData>
        </div>
        <div v-for="item in res_notice" :key="item.id">
            <div class="my-notice-detail">
                <div class="my-notice-content">
                    <div class="main-content">{{ item.title }}</div>
                    <div class="detail-content">
                        <span>{{ item.content }}</span>
                    </div>
                </div>
                <div class="my-notice-time">{{ item.publishTime }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import NoData from '@/components/NoData.vue';
import { GetMyNotice } from '@/api/front/contest'
import { onMounted, ref } from 'vue';
// 判断NoData是否显示
const loadingFailed = ref(false);

const userData = JSON.parse(localStorage.getItem('userInfo'));
const res_notice = ref([]);
async function loadData() {
    console.log('userId', userData.userId);
    try {
        const response = await GetMyNotice({ id: userData.userId });
        res_notice.value = response.data; // 将获取的评论数据赋值给 ref
        console.log('res_notice', res_notice.value);
    } catch (error) {
        console.error('Failed to get messages:', error);
        loadingFailed.value = true;
    }
}
onMounted(loadData)
</script>

<style scoped lang="scss">
.my-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.my-notice-detail {
    width: 670px;
    height: 100px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin: 10px 35px 30px 35px;
    display: flex;
    // border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-1);


    .my-notice-content {
        width: 535px;
        // background-color: lightcoral;
        padding: 20px 0 20px 15px;

        .main-content {
            font-weight: 600;
        }

        .detail-content {
            font-size: 14px;
            margin-top: 10px;
        }
    }

    .my-notice-time {
        width: 85px;
        font-size: 12px;
        margin: 25px auto;
    }
}
</style>